<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Scoped CSS Variables and JS</title>
    <link rel="icon" href="https://fav.farm/🔥" />
  </head>
  <body>
    <h2>Update CSS Variables with <span class="hl">JS</span></h2>

    <div class="controls">
      <label for="spacing">Spacing:</label>
      <input
        id="spacing"
        type="range"
        name="spacing"
        min="10"
        max="200"
        value="10"
        data-sizing="px"
      />

      <label for="blur">模糊:</label>
      <input
        id="blur"
        type="range"
        name="blur"
        min="0"
        max="25"
        value="10"
        data-sizing="px"
      />

      <label for="base">基本颜色</label>
      <input id="base" type="color" name="base" value="#ffc600" />
    </div>

    <img src="./assets/pexels-photo-17890089.jpeg" />

    <style>
      /*
      misc styles, nothing to do with CSS variables
    */
      :root {
        --base: #ffc600;
        --spacing: 10px;
        --blur: 0px;
      }

      body {
        text-align: center;
        background: #193549;
        color: white;
        font-family: 'helvetica neue', sans-serif;
        font-weight: 100;
        font-size: 50px;
      }

      .controls {
        margin-bottom: 50px;
      }

      input {
        width: 100px;
      }
      img {
        width: 600px;
        padding: var(--spacing);
        background: var(--base);
        filter: blur(var(--blur));
      }
      .hl {
        color: var(--base);
      }
    </style>

    <script>
      const inputs = document.querySelectorAll('.controls input')
      function handleUpdate() {
        // data-   表示自定义属性  获取单位px
        const unit = this.dataset.sizing || ''
        // document.documentElement获取到整个html网页
        // setProperty第一个参数表示修改css属性  第二个表示修改的值
        document.documentElement.style.setProperty(
          `--${this.name}`,
          `${this.value}` + unit
        )
      }

      inputs.forEach((input) => input.addEventListener('change', handleUpdate))
    </script>
  </body>
</html>
